<template>
    <div class="home page">
        <formHeader :title="'提现'" color></formHeader>
        <div class="detail">
            <div class="note" @click="turn('/order/withdraw?identify=0')">提现记录</div>
            <div class="remain">
                <div class="word">全部余额(元)</div>
                <div class="money">{{(canApply+noApply)?(canApply+noApply).toFixed(2):'0.00'}}</div>
            </div>
            <div class="withDrawCard">
                <div class="cell">
                    <div class="money">{{canApply}}</div>
                    <div class="name">可提现额度</div>
                    <div class="btn" @click="turn('/withdraw?amount='+canApply)">申请提现</div>
                    <div class="tips">分享有利&采购有利</div>
                </div>
                <div class="cell">
                    <div class="money">{{noApply}}</div>
                    <div class="name">不可提现额度</div>
                    <div class="btn check" @click="turn('/earn?type=0')">查看明细</div>
                    <div class="tips">代理有利</div>
                </div>
            </div>
        </div>
        <div class="content">
            <cube-scroll ref="scroll" :options="options" @pulling-up="getList()">
                <div class="items">
                    <div class="daily" v-for="(item,index) in list" :key="index">
                        <div class="title">{{item[0].time}}</div>
                        <div class="item" v-for="(cell,cellIndex) in item" :key="cellIndex">
                            <div class="top">
                                <div class="name">{{cell.text}}</div>
                                <div class="money">{{cell.amount}}元</div>
                            </div>
                            <div class="desc">{{cell.bus==3?'分享&采购收益':'店铺管理收益'}}</div>
                        </div>
                    </div>
                </div>
            </cube-scroll>
        </div>
    </div>
</template>

<script>
    import formHeader from "@/components/form-header"
    import {getCanWithdraw} from '@/api/order'
    import {parseTime} from "../../common/js/time"
    import {mapState} from 'vuex'

    export default {
        name: "home",
        components: {formHeader},
        data() {
            return {
                options: {
                    pullUpLoad: true,
                },
                canApply: 0,
                noApply: 0,
                list: [],
                page: 1,
                originlist:[]
            }
        },
        activated() {
            this.getList()
        },
        methods: {
            turn(path) {
                this.$router.push({
                    path: path
                })
            },
            getList() {
                getCanWithdraw(this.page).then(res => {
                    this.canApply = res.data.canApply
                    this.noApply = res.data.noCanApply
                    let list = res.data.accounts.map(item => {
                        let temp = {
                            amount: item.amount,
                            time: parseTime(item.time, '{m}-{d}'),
                            text: '收入',
                            bus:item.bus
                        }
                        if (item.fromUserId == this.userId) {
                            temp.amount = -temp.amount
                            temp.text = '支出'
                        } else {
                            temp.amount = '+' + temp.amount
                        }
                        return temp
                    })
                    if (this.page==1){
                        this.originlist = list
                    }else {
                        this.originlist = this.originlist.concat(list)
                    }
                    this.page++
                    let cache={}
                    this.list = this.originlist.reduce((sum,cur)=>{
                        let index = cache[cur.time]
                        if (index!==undefined){
                            sum[index].push(cur)
                        }else {
                            sum.push([cur])
                            cache[cur.time] = sum.length-1
                        }
                        return sum
                    },[])
                    this.$nextTick(()=>{
                        this.$refs.scroll.refresh()
                        this.$refs.scroll.forceUpdate()
                    })
                })
            }
        },
        computed: {
            ...mapState({
                "userId": state => state.user.user.userId
            })
        },
    }
</script>

<style scoped lang="stylus">
    .home
        background-color: #fff

        .detail
            background-color: #00d6c0
            margin-top 47px
            padding 0 16px
            padding-top 10px
            height 173px

            .note
                text-align right
                color #fff
                font-size 13px
                line-height 18px

            .remain
                text-align center
                color #fff

                .word
                    line-height 17px
                    font-size 12px

                .money
                    line-height 44px
                    font-size 36px
                    font-weight bold

            .withDrawCard
                display flex
                margin-top 24px
                height 108px
                background-color: #fff
                border-radius 8px
                box-shadow 0px 1px 3px 0px rgba(0, 214, 192, 0.3)

                .cell
                    flex 0.5
                    text-align center

                    .money
                        color #333737
                        font-size 16px
                        line-height 20px
                        margin-top 10px

                    .name
                        color #676d6c
                        font-size 12px
                        margin-top 2px
                        line-height 17px

                    .btn
                        width 109px
                        height 25px
                        text-align center
                        line-height 25px
                        background-color: #00d6c0
                        margin 0 auto
                        margin-top 8px
                        border-radius 12.5px
                        font-size 12.5px
                        color #fff

                    .check
                        background-color: #defffc
                        color #00d6c0

                    .tips
                        color #d5dbdb
                        font-size 9px
                        margin-top 5px


        .content
            height calc(100% - 210px)
            padding-top 50px

            .daily
                .title
                    background-color: #f3f3f3;
                    padding 0 17px
                    color #333737
                    height 27px
                    font-size 13px
                    line-height 27px

                .item
                    height 42px
                    padding 12px 17px
                    display flex
                    flex-direction column
                    justify-content space-between

                    .top
                        color #333737
                        font-size 14px
                        display flex
                        justify-content space-between

                    .desc
                        color #b6b9bb
                        font-size 12px
                        line-height 17px
</style>